<template>
	<view class="container">
	 <view>
	  <uni-row > 
		 <uni-col span="24" ><image :src="datake.imgurl"></image></uni-col>
	  </uni-row>
	 </view>	
    <view>
	<uni-row >
		 <uni-col span="23" push="1" class="course-title">有氧拉丁课程体验</uni-col>
	</uni-row>
	</view>
	
	<view class="viewGlobal">
	<uni-row >
		 <uni-col span="23"  push="1" class="description">提高了身体的协调性和曲线感</uni-col>
	</uni-row>
	</view>
    
	
	<view class="GrayLine"></view>
	
	<view>
		<uni-row >
			 <uni-col span="2" push="1"  class="arborescence"></uni-col>
			 <uni-col span="22" push="2"  class="course_details">课程详情</uni-col>
		</uni-row>
	</view>
   
   <view>
   	<uni-row>
   		 <uni-col span="22" push="1"  class="service-details">授芭蕾舞的基本舞步，对收紧肌肉及改善体态极为有效。适合初学者及芭蕾舞爱好者。</uni-col>
   	</uni-row>
   </view>

   <view class="viewGlobal">
   	<uni-row>
   		 <uni-col span="22" push="1"  class="level">LEVEL M - Multi Level</uni-col>
   	</uni-row>
	
   </view>
	
	<view >
	<uni-row>
		 <uni-col span="22" push="1"  class="level">多级别</uni-col>
	</uni-row>
	</view>
    
    <view >
    <uni-row class="viewGlobal">
    	 <uni-col span="22" push="1"  class="contact">TD AIMIMA </uni-col>
    </uni-row>
    </view>
    

	<!-- 提示信息 -->
	<u-toast ref="uToast"></u-toast>

	<u-popup mode="bottom" :show="show"  :closeable="closeable" @close="close" @open="open" :closeOnClickOverlay="closeOnClickOverlay" :safeAreaInsetBottom="safeAreaInsetBottom">
	            <view class="uni-px-5">
	              	<uni-data-checkbox class="checked" mode="tag" v-model="radio" :localdata="timeData"
	            	 ></uni-data-checkbox>
	            	 <button class="reserve-btn1" @click="resv">确认预约</button>
	            </view>
	</u-popup>
	<view >
	<uni-row class="viewGlobal">
		 <uni-col span="22" push="1"><u-button class="reserve-btn" type="primary" shape="circle" @click="show=true">前往预约</u-button></uni-col>
	</uni-row>
	</view>
    

  
  </view>
</template>

<script>

export default {
  data() {
    return {
		params:{
			position:"top",
			type: 'success',
			title: "预约成功"	,
			message: "此情可待成追忆",
			url: '/pages/componentsB/tag/tag',
			iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
		},

		safeAreaInsetBottom:false,
		closeOnClickOverlay:false,
		//底部弹出框是否可关闭
		closeable:true,
		//前往预约判断
		show:false,
		datake:
			{
				imgurl:"../../../static/images/舞蹈.png",

			},

		//已预约时间段
		timeDataDel:[9,9.5],
		//该课程时间 1代表1小时
		coachtime:1,

		radio:null,
		//默认时间段
		timeData:[
					//上午时间段
					{value:8.5,
					disable:false,
					text:"08:30"},

					{value:9,
					disable:false,
					text:"09:00"},

					{value:9.5,
					disable:false,
					text:"09:30"},

					{value:10,
					disable:false,
					text:"10:00"},

					{value:10.5,
					disable:false,
					text:"10:30"},

					{value:11,
					disable:false,
					text:"11:00"},







					//下午时间段
					{value:13,
					disable:false,
					text:"13:00"},

					{value:13.5,
					disable:false,
					text:"13:30"},

					{value:14,
					disable:false,
					text:"14:00"},

					{value:14.5,
					disable:false,
					text:"14:30"},

					{value:15,
					disable:false,
					text:"15:00"},

					{value:15.5,
					disable:false,
					text:"15:30"},

					{value:16,
					disable:false,
					text:"16:00"},

					{value:16.5,
					disable:false,
					text:"16:30"},

					{value:17,
					disable:false,
					text:"17:00"},

					{value:17.5,
					disable:false,
					text:"17:30"},

					{value:18,
					disable:false,
					text:"18:00"},

					{value:18.5,
					disable:false,
					text:"18:30"},

					{value:19,
					disable:false,
					text:"19:00"}
				]

	}
  },
  methods:{
	   //提交预约时间段
	        resv (){
	  		  //遍历预约时间段的时间对象
	  		  for(let i=0;i<this.timeData.length;i++){
	  			  //遍历的时间对象与用户所选的时间对象进行比对
	  			  if(this.radio==this.timeData[i].value){

	  				  if(this.radio<=18&&this.radio!=11){

						  if(this.coachtime==1){
							  this.timeDataDel.push(this.radio)
							  this.timeDataDel.push(this.radio+0.5)

							  this.params.message="该课程用时为"+this.coachtime+"小时"+"课程时间为"+this.timeData[i].text+"~"+this.timeData[i+2].text
						      this.showToast(this.params);
						  }else if(this.coachtime==0.5){
							  this.timeDataDel.push(this.radio)

							  this.params.message="该课程用时为"+this.coachtime+"小时"+"已成功预约,课程时间为"+this.timeData[i].text+"~"+this.timeData[i+1].text
							  this.showToast(this.params);

						  }



	  				  }else if(this.radio==18.5){
						  if(this.coachtime==0.5){
							  this.timeDataDel.push(this.radio)
							  this.params.message="该课程用时为"+this.coachtime+"小时"+"已成功预约,课程时间为"+this.timeData[i].text+"~"+"19:00"
							  this.showToast(this.params);
						  }else if(this.coachtime==1){
							  this.timeDataDel.push(this.radio)
							  this.timeDataDel.push(this.radio+0.5)
							  this.params.message="该课程用时为"+this.coachtime+"小时"+"已成功预约,课程时间为"+this.timeData[i].text+"~"+"19:30"
							  this.showToast(this.params);
						  }



	  				  }else if(this.radio==19){
	  					  this.timeDataDel.push(this.radio);
						  if(this.coachtime==0.5){
							  this.params.message="该课程用时为"+this.coachtime+"小时"+"已成功预约,课程时间为"+this.timeData[i].text+"~"+"19:30"
							  this.showToast(this.params);
						  }else if(this.coachtime==1){
							  this.params.message="该课程用时为"+this.coachtime+"小时"+"已成功预约,课程时间为"+this.timeData[i].text+"~"+"20:00"
							  this.showToast(this.params);
						  }
	  				  } else{
	  					  this.timeDataDel.push(this.radio);
						  if(this.coachtime==0.5){
							  this.params.message="该课程用时为"+this.coachtime+"小时"+"已成功预约,课程时间为"+this.timeData[i].text+"~"+"11:30"
							  this.showToast(this.params);
						  }else if(this.coachtime==1){
							  this.params.message="该课程用时为"+this.coachtime+"小时"+"已成功预约,课程时间为"+this.timeData[i].text+"~"+"20:00"
							  this.showToast(this.params);
						  }
					  }
	  			  }
	  		  }
	  		  this.resd()
	  	  },
	  	  //将已预约的时间段禁止
	  	  resd (){

	  		  for(let i=0;i<this.timeData.length;i++){
	  			  for(let a=0;a<this.timeDataDel.length;a++){
	  			  		if(this.timeData[i].value==this.timeDataDel[a]){
	  						this.timeData[i].disable=true
	  					}
	  			  }
	  		  }
	  	  }
		  ,
	      open() {
	         // console.log('open');
	       },
	      showToast(params) {
			  this.show=false
			  this.radio=null
		   		this.$refs.uToast.show({
		   			...params,

		   			complete() {
		   			params.url && uni.navigateTo({
		   					url: params.url
		   				})
		   			}
		   		})
		   },
	      close() {
	         this.show = false
	         // console.log('close');
	      }
  },
  mounted:function(){
  	this.resd();
  }
};
</script>

<style>
.viewGlobal{
	margin-top: 60rpx;
}
.container {


}
 image{
	 height: 410rpx;
	 width: 100%;
 }


.course-title {
  font-size: 20px;


  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.description {
  
  font-size: 16px;

}
.service-hint{
	
	background-color: #f9f9f9;
	font-family: Microsoft YaHei;
	font-size: 16px;
	height: 3vh;
	display: inline-block;
	

}
.arborescence{
	display: inline-block;
	background-color: black;

	width: 0.8vh;
	height: 3vh;
	color: black;
    border-radius: 10px;

}
.service-details {

  
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
}
.level {
  
  font-weight: bold;
  color: #333;
}
.contact {
  
  color: #555;
}
.reserve-btn {
  width: 95%;
  height: 8vh;
  background-color: black;
  color: white;
  padding: 3px;
  border: none;
  border-radius: 50px;
  
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 40rpx;
}

.text {
		font-size: 12px;
		color: #333;
}
.booking1{
	display: flex;
	align-items: center;

}
.arborescence{
	display: inline-block;
	background-color: black;
	width: 0.8vh;
	height: 48rpx;
	color: black;
    border-radius: 10px;
}
.course_details{
	
	font-weight: 700;
}
.uni-px-5 {
 	    padding-left: 30rpx;
 	    padding-right: 10rpx;
		padding-top: 20rpx;

}


.reserve-btn1 {
  width: 95%;
  height: 8vh;
  background-color: #00CED1;
  color: white;
  padding: 3px;
  border: none;
  

  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);

}

.GrayLine{
	width: 140vh;
	height: 25rpx;
	background-color: rgb(244,244,244);
	margin-left:-40rpx ;
	margin-top: 20rpx;
}

</style>